<template>
  <div id="toast" v-show="isshow">
    {{message}}
  </div>
</template>

<script>
  export default {
    name: "Toast",
    data(){
      return{
        message:'',
        isshow:false,
      }
    },
    methods:{
        show(msg,duration=2000){
          this.isshow = true
          this.message = msg

          setTimeout(()=>{
            this.isshow = false;
            this.message = ''
          },duration)
        }
    }
  }
</script>

<style scoped>
  #toast{
    padding: 10px 10px;
    line-height: 1.5em;
    position: fixed;
    top:50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-color: rgba(0,0,0,0.7);
    color: white;
    border-radius: 20px;
    z-index: 100;
  }

</style>
